<template>
    <el-dialog title="详情" :close-on-click-modal="false" append-to-body :visible.sync="visible"
        class="JNPF-dialog JNPF-dialog_center" lock-scroll width="1000px">
        <el-row :gutter="15" class="">
            <el-form ref="formRef" :model="dataForm" size="small" label-width="100px" label-position="top">
                <template v-if="!loading">
                    <!-- 具体表单 -->
                    <!-- <el-col :span="24">
                        <jnpf-form-tip-item label="金融产品名称" prop="financialproducts">
                            <JnpfInput v-model="dataForm.financialproducts" readonly
                                @change="changeData('financialproducts', -1)" placeholder="请输入" clearable
                                :style='{ "width": "100%" }'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="产品类型" prop="producttype">
                            <JnpfSelect v-model="dataForm.producttype" readonly @change="changeData('producttype', -1)"
                                placeholder="请选择" clearable :style='{ "width": "100%" }' :options="producttypeOptions"
                                :props="producttypeProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="适用区域" prop="applicablearea">
                            <JnpfSelect v-model="dataForm.applicablearea" readonly
                                @change="changeData('applicablearea', -1)" placeholder="请选择" clearable
                                :style='{ "width": "100%" }' :options="applicableareaOptions"
                                :props="applicableareaProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="产品简介" prop="productintroduction">
                            <JnpfTextarea v-model="dataForm.productintroduction" readonly
                                @change="changeData('productintroduction', -1)" placeholder="请输入"
                                :style='{ "width": "100%" }' true type="textarea"
                                :autosize='{ "minRows": 4, "maxRows": 4 }'>
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="产品详情" prop="productdetails">
                            <JnpfEditor v-model="dataForm.productdetails" disabled
                                @change="changeData('productdetails', -1)" placeholder="请输入"
                                :style='{ "width": "100%" }'>
                            </JnpfEditor>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="适用客户" prop="applicablecustomers">
                            <JnpfInput v-model="dataForm.applicablecustomers" readonly
                                @change="changeData('applicablecustomers', -1)" placeholder="请输入" clearable
                                :style='{ "width": "100%" }'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="产品特点" prop="productfeatures">
                            <JnpfEditor v-model="dataForm.productfeatures" disabled
                                @change="changeData('productfeatures', -1)" placeholder="请输入"
                                :style='{ "width": "100%" }'>
                            </JnpfEditor>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="所需材料" prop="requiredmaterials">
                            <JnpfTextarea v-model="dataForm.requiredmaterials" readonly
                                @change="changeData('requiredmaterials', -1)" placeholder="请输入"
                                :style='{ "width": "100%" }' true type="textarea"
                                :autosize='{ "minRows": 4, "maxRows": 4 }'>
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="联系电话" prop="telephone">
                            <JnpfInput v-model="dataForm.telephone" readonly @change="changeData('telephone', -1)"
                                placeholder="请输入" clearable :style='{ "width": "100%" }'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col> -->
                    <el-col :span="24">
                        <jnpf-form-tip-item label="金融产品名称" prop="financialproducts">
                            <JnpfInput v-model="dataForm.financialproducts"
                                @change="changeData('financialproducts', -1)" placeholder="请输入" readonly clearable
                                :style='{ "width": "100%" }'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="贷款类别" prop="loancategory">
                            <JnpfInput v-model="dataForm.loancategory" @change="changeData('loancategory', -1)"
                                placeholder="请输入" readonly clearable :style='{ "width": "100%" }'>
                            </JnpfInput>
                            <!-- <JnpfSelect v-model="dataForm.loancategory" @change="changeData('loancategory', -1)"
                                placeholder="请选择" aria-readonly="true" clearable :style='{ "width": "100%" }'
                                :options="loancategoryOptions" :props="loancategoryProps">
                            </JnpfSelect> -->
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="产品介绍" prop="productinfo">
                            <JnpfEditor v-model="dataForm.productinfo" @change="changeData('productinfo', -1)"
                                placeholder="请输入" disabled :style='{ "width": "100%" }'>
                            </JnpfEditor>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="产品介绍视频" prop="productinfovideo">
                            <JnpfUploadFile v-model="dataForm.productinfovideo" disabled detailed :fileSize="10"
                                sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0" buttonText="点击上传">
                            </JnpfUploadFile>
                            <!-- <JnpfUploadFile v-model="dataForm.productinfovideo"
                                @change="changeData('productinfovideo', -1)" disabled :fileSize="10" sizeUnit="MB"
                                :limit="9" pathType="defaultPath" :isAccount="0" buttonText="点击上传">
                            </JnpfUploadFile> -->
                        </jnpf-form-tip-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <jnpf-form-tip-item label="产品特点及详情" prop="productdetails">
                            <JnpfEditor v-model="dataForm.productdetails" @change="changeData('productdetails', -1)"
                                placeholder="请输入" disabled :style='{ "width": "100%" }'>
                            </JnpfEditor>
                        </jnpf-form-tip-item>
                    </el-col> -->
                    <el-col :span="24">
                        <jnpf-form-tip-item label="办理流程" prop="handlingprocess">
                            <JnpfEditor v-model="dataForm.handlingprocess" @change="changeData('handlingprocess', -1)"
                                placeholder="请输入" disabled :style='{ "width": "100%" }'>
                            </JnpfEditor>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="办理流程视频" prop="handlingprocessvideo">
                            <!-- <JnpfUploadFile v-model="dataForm.handlingprocessvideo"
                                    @change="changeData('handlingprocessvideo', -1)" disabled :fileSize="10"
                                    sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0" buttonText="点击上传">
                                </JnpfUploadFile> -->
                            <JnpfUploadFile v-model="dataForm.handlingprocessvideo" disabled detailed :fileSize="10"
                                sizeUnit="MB" :limit="9" pathType="defaultPath" :isAccount="0" buttonText="点击上传">
                            </JnpfUploadFile>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="申请条件" prop="applicationconditions">
                            <JnpfTextarea v-model="dataForm.applicationconditions"
                                @change="changeData('applicationconditions', -1)" placeholder="请输入" readonly
                                :style='{ "width": "100%" }' true type="textarea"
                                :autosize='{ "minRows": 4, "maxRows": 4 }'>
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="所需材料" prop="requiredmaterials">
                            <JnpfTextarea v-model="dataForm.requiredmaterials"
                                @change="changeData('requiredmaterials', -1)" placeholder="请输入" readonly
                                :style='{ "width": "100%" }' true type="textarea"
                                :autosize='{ "minRows": 4, "maxRows": 4 }'>
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="联系电话" prop="telephone">
                            <JnpfInput v-model="dataForm.telephone" @change="changeData('telephone', -1)"
                                placeholder="请输入" readonly clearable :style='{ "width": "100%" }'>
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <!-- 表单结束 -->
                </template>
            </el-form>
        </el-row>
        <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false"> 取 消</el-button>
        </span> -->
        <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
    </el-dialog>
</template>
<script>
import request from '@/utils/request'

import { getConfigData } from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import { thousandsFormat } from "@/components/Generator/utils/index"
export default {
    components: { Detail },
    props: [],
    data() {
        return {
            visible: false,
            detailVisible: false,
            loading: false,

            dataForm: {
                id: '',
                financialproducts: '',
                producttype: "",
                applicablearea: "",
                productintroduction: '',
                productdetails: '',
                applicablecustomers: '',
                productfeatures: '',
                requiredmaterials: '',
                telephone: '',
            },
            producttypeProps: { "label": "fullName", "value": "id" },
            applicableareaProps: { "label": "fullName", "value": "id" },

        }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() { },
    methods: {
        toDetail(defaultValue, modelId) {
            if (!defaultValue) return
            getConfigData(modelId).then(res => {
                if (!res.data || !res.data.formData) return
                let formData = JSON.parse(res.data.formData)
                formData.popupType = 'general'
                this.detailVisible = true
                this.$nextTick(() => {
                    this.$refs.Detail.init(formData, modelId, defaultValue)
                })
            })
        },
        dataInfo(dataAll) {
            let _dataAll = dataAll
            this.dataForm = _dataAll
        },

        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                if (this.dataForm.id) {
                    this.loading = true
                    request({
                        url: '/api/example/Fz_financial_products/detail/' + this.dataForm.id,
                        method: 'get'
                    }).then(res => {
                        this.dataInfo(res.data)
                        this.loading = false
                    })
                }

            })
        },
    },
}

</script>